<template>
  <el-dialog :visible.sync="visible" 
  :title="!dataForm.id ? '添加' : '修改'" 
  :append-to-body="true"
  :lock-scroll="true"
  :close-on-click-modal="false" 
  :close-on-press-escape="false">
    <el-form 
    label-position="right" 
    :inline="true"
    :model="dataForm" :rules="dataRule" ref="dataForm"  @keydown.enter.native.prevent="dataFormSubmitHandle()">
      <el-form-item prop="name" label="角色名">
        <el-input v-model="dataForm.name" placeholder="角色名"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="备注">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
      <!-- <el-row>
        <el-col :span="12">
          <el-form-item size="mini" label="角色菜单列表">
            <el-tree
              :data="menuList"
              :props="{ label: 'name', children: 'children' }"
              node-key="id"
              ref="menuListTree"
              accordion
              show-checkbox>
            </el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item size="mini" label="角色们列表">
            <el-tree
              :data="deptList"
              :props="{ label: 'name', children: 'children' }"
              node-key="id"
              ref="deptListTree"
              accordion
              show-checkbox>
            </el-tree>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import servicesApi from '@/services/servicesApi'
export default {
  data() {
    return {
      visible: false,
      menuList: [],
      dataForm: {
        id: 0,
        name: 'test',
        // menuIdList: [],
        remark: 'test'
      }
    }
  },
  computed: {
    dataRule() {
      return {
        name: [
          { required: true, message: '请输入角色名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      this.visible = true
      this.dataForm.id = id || 0
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        // this.$refs.menuListTree.setCheckedKeys([])
        Promise.all([
          // this.getMenuList()
        ]).then(() => {
          if (this.dataForm.id) {//修改
            this.getInfo()
          }
        })
      })

      // this.visible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].resetFields()
      //   this.$refs.menuListTree.setCheckedKeys([])
      //   this.$refs.deptListTree.setCheckedKeys([])
      //   Promise.all([
      //     this.getMenuList(),
      //     this.getDeptList()
      //   ]).then(() => {
      //     if (this.dataForm.id) {
      //       this.getInfo()
      //     }
      //   })
      // })
    },
    // 获取菜单列表
    getMenuList() {
      // return this.$http.get('/sys/menu/select').then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   }
      //   this.menuList = res.data
      // }).catch(() => {})
    },
    // 获取部门列表
    getDeptList() {
      // return this.$http.get('/sys/dept/list').then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   }
      //   this.deptList = res.data
      // }).catch(() => {})
    },
    // 获取信息
    getInfo() {
      servicesApi.getRoleById(this.dataForm.id).then(res => {
        if (res.data.code !== 200) {
          return this.$message.error(res.data.msg)
        }
        this.dataForm = res.data.data
        // this.dataForm = { //解构赋值
        //   ...this.dataForm,
        //   ...res.data
        // }
      })
      // this.$http.get(`/sys/role/${this.dataForm.id}`).then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   }
      //   this.dataForm = { //解构赋值
      //     ...this.dataForm,
      //     ...res.data
      //   }
      //   this.dataForm.menuIdList.forEach(item => this.$refs.menuListTree.setChecked(item, true))
      //   this.$refs.deptListTree.setCheckedKeys(this.dataForm.deptIdList)
      // }).catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        if (this.dataForm.id) { //修改角色信息
          servicesApi.updateRole(this.dataForm).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else { //新增角色
          servicesApi.addRole(this.dataForm).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
        // this.dataForm.menuIdList = [
        //   ...this.$refs.menuListTree.getHalfCheckedKeys(),
        //   ...this.$refs.menuListTree.getCheckedKeys()
        // ]
        // this.dataForm.deptIdList = this.$refs.deptListTree.getCheckedKeys()
        // this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/role', this.dataForm).then(({ data: res }) => {
        //   if (res.code !== 0) {
        //     return this.$message.error(res.msg)
        //   }
        //   this.$message({
        //     message: this.$t('prompt.success'),
        //     type: 'success',
        //     duration: 500,
        //     onClose: () => {
        //       this.visible = false
        //       this.$emit('refreshDataList')
        //     }
        //   })
        // }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
